<template>
<div>
<!--  搜索框-->
  <div class="title">
    <el-input
      placeholder="请输入教师姓名"
      v-model="input"
      clearable>
    </el-input>
    <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    <!--增加按钮-->
    <el-button type="primary" round @click="add" class="addbut" >增添教师</el-button>
  </div>



  <el-table
    :data="teacherList"
    style="width: 100%">
    <el-table-column
      label="教师编号"
      prop="teacherId"
      width="80">
    </el-table-column>
    <el-table-column
      label="教师姓名"
      prop="teacherName"
      width="80">
    </el-table-column>
    <el-table-column label="教师头像">
      <template slot-scope="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.teacherImg"
          fit="cover"></el-image>
      </template>
    </el-table-column>
    <el-table-column
      label="教师性别"
      prop="teacherSex"
      width="100">
    </el-table-column>
    <el-table-column
      label="教师邮箱"
      prop="teacherEmail"
      width="180">
    </el-table-column>
    <el-table-column
      label="教师身份证号码"
      prop="teacherCareid"
      width="140">
    </el-table-column>
    <el-table-column
      label="教师电话"
      prop="teacherTel"
      width="140">
    </el-table-column>
    <el-table-column
      label="教师地址"
      prop="teacherAddr"
      width="140">
    </el-table-column>
<!--    <el-table-column label="教师编号">-->
<!--      <template slot-scope="scope">-->
<!--        <el-button @click="seeClick(scope.row)" type="success" round>查看内容</el-button>-->
<!--      </template>-->
<!--    </el-table-column>-->
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
        <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页组件-->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageAble.currentPage"
    :page-sizes="pageAble.pageSizes"
    :page-size="pageAble.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pageAble.total">
  </el-pagination>

  <!--    编辑信息-->
  <el-dialog title="修改教师信息" :visible.sync="dialogFormVisible">
    <el-form :model="frmdata">
      <el-form-item label="教师姓名" >
        <el-input v-model="frmdata.teacherName"></el-input>
      </el-form-item>
      <el-form-item label="教师电话" >
        <el-input v-model="frmdata.teacherTel"></el-input>
      </el-form-item>
      <el-form-item label="教师图片" >
        <!--          <el-input v-model="frmdata.goodsPic"></el-input>-->
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8085/teacher/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" width="80">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-image
          style="width: 100px; height: 100px"
          :src="frmdata.teacherImg"
          fit="cover"></el-image>
      </el-form-item>
      <el-form-item label="教师邮箱" >
        <el-input v-model="frmdata.teacherEmail"></el-input>
      </el-form-item>
      <el-form-item label="教师电话" >
        <el-input v-model="frmdata.teacherTel"></el-input>
      </el-form-item>
      <!--        <el-form-item label="活动区域" :label-width="formLabelWidth">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="frmsubmit">确 定</el-button>
    </div>
  </el-dialog>

<!--  增添教师信息-->
  <el-dialog title="增添教师信息" :visible.sync="dialogFormVisible">
    <el-form :model="frmdata">
      <el-form-item label="教师姓名" >
        <el-input v-model="frmdata.teacherName"></el-input>
      </el-form-item>
      <el-form-item label="教师电话" >
        <el-input v-model="frmdata.teacherTel"></el-input>
      </el-form-item>
      <el-form-item label="教师性别" >
        <el-input v-model="frmdata.teacherSex"></el-input>
      </el-form-item>
      <el-form-item label="教师地址" >
        <el-input v-model="frmdata.teacherAddr"></el-input>
      </el-form-item>
      <el-form-item label="教师图片" >
        <!--          <el-input v-model="frmdata.goodsPic"></el-input>-->
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8085/teacher/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" width="80">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-image
          style="width: 100px; height: 100px"
          :src="frmdata.teacherImg"
          fit="cover"></el-image>
      </el-form-item>
      <el-form-item label="教师邮箱" >
        <el-input v-model="frmdata.teacherEmail"></el-input>
      </el-form-item>
      <el-form-item label="教师电话" >
        <el-input v-model="frmdata.teacherTel"></el-input>
      </el-form-item>
      <el-form-item label="教师身份证号" >
        <el-input v-model="frmdata.teacherCareid"></el-input>
      </el-form-item>
      <el-form-item label="教师登录凭证" >
        <el-input v-model="frmdata.teacherPass"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="frmsubmit">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "teacher",
  data(){
    return{
      input:'',
      teacherList:[
        {
          teacherId: 0,
          teacherName: "",
          teacherPass: "",
          teacherTel: "",
          teacherSex: "",
          teacherEmail: "",
          teacherCareid: "",
          teacherAddr: "",
          teacherImg:'',
          roleId: 2
        }
      ],
      pageAble:{
        currentPage:1,
        pageSize:3,
        pageNum:0,
        pageSizes:[2,3,5,6],
        total:0
      },
      dialogFormVisible:false, //是否显示表单属性
      frmdata:{
        teacherId: '',
        teacherName: "",
        teacherPass: "",
        teacherTel: "",
        teacherSex: "",
        teacherEmail: "",
        teacherCareid: "",
        teacherAddr: "",
        teacherImg:'',
        roleId: 2
      },
      imageUrl:'',
    }
  },
  methods:{
    add(){
      this.dialogFormVisible=true;//打开
    },
    search(){
      this.findAll()
    },
    handleDelete(row){
      this.frmdata=row;
      this.$axios.get('/teacher/delete',{
        params:{
          teacherId:this.frmdata.teacherId
        }
      }).then(res=>{
        if (res.code==200){
          this.findAll()
        }else {
          el.message("删除失败");
        }
      })
    },
    // seeClick(row){
    //   this.frmdata = row;
    //   this.$router.push({name:'info',params:{newsTitle:this.frmdata.newsTitle,newsWriter:this.frmdata.newsWriter,
    //       newsTime:this.frmdata.newsTime,newsAbstract:this.frmdata.newsAbstract,newsContent:this.frmdata.newsContent,newsImg:this.frmdata.newsImg}})
    // },
    frmsubmit(){
      //提交
      this.$axios.post('/teacher/addOrUpdate',this.frmdata).then(res=>{
        if(res.code==200){
          //关闭对话框
          this.dialogFormVisible = false;
          this.imageUrl='';
        }else{
          //element提示
        }
      });

    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      //console.log('handleAvatarSuccess===>',file,res);
      this.frmdata.teacherImg=res.data;
    },
    beforeAvatarUpload(file) {
      /*const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;*/
      return true;
    },
    handleClick(row) {
      //打开表单层
      this.dialogFormVisible=true;//打开
      //将当前行的数据填充在表单里
      this.frmdata=row;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    findAll(){
      this.$axios.get('/teacher/findAll', {
        params:{
          page:this.pageAble.currentPage,
          limit:this.pageAble.pageSize,
          keyword:this.input
        }
      }).then(res=>{
        this.teacherList = res.data.records;
        this.pageAble.total=res.data.total;
        this.input='';
      }).catch()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageAble.pageSize=val;
      this.findAll();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageAble.currentPage=val;
      //重查
      this.findAll();
    },
  },
  mounted() {
    this.findAll()
  }
}
</script>

<style scoped>
.title{
  display: flex;
  align-items: center;
  height: 50px;
  width: 500px;
}
.addbut{
  margin-left: 100px;
}
</style>
